<template>
  <div class="file-diff-container">
    <div class="diff-header">
      <h1>在线文本对比工具</h1>
      <p class="instructions">请输入文本1和文本2，结果将自动计算并显示在下方</p>
      <p class="privacy-notice">数据不会发送到服务器，请放心使用！</p>
    </div>

    <div class="diff-content">
      <div class="text-inputs">
        <div class="text-area-container">
          <div class="text-header">
            <span class="text-label">🍊 文本1</span>
            <div class="text-actions">
              <button @click="clearText1" class="clear-btn">清空</button>
              <button @click="loadSample1" class="sample-btn">示例</button>
            </div>
          </div>
          <textarea
            v-model="text1"
            placeholder="请输入或粘贴第一段文本..."
            class="text-area"
          ></textarea>
        </div>

        <div class="text-area-container">
          <div class="text-header">
            <span class="text-label">🍒 文本2</span>
            <div class="text-actions">
              <button @click="clearText2" class="clear-btn">清空</button>
              <button @click="loadSample2" class="sample-btn">示例</button>
            </div>
          </div>
          <textarea
            v-model="text2"
            placeholder="请输入或粘贴第二段文本..."
            class="text-area"
          ></textarea>
        </div>
      </div>

      <div class="diff-options">
        <div class="diff-type-selector">
          <label class="diff-type-label">对比级别:</label>
          <div class="diff-type-options">
            <label class="radio-option">
              <input type="radio" v-model="diffType" value="chars" />
              <span>字符级别</span>
            </label>
            <label class="radio-option">
              <input type="radio" v-model="diffType" value="words" />
              <span>单词级别</span>
            </label>
            <label class="radio-option">
              <input type="radio" v-model="diffType" value="lines" />
              <span>行级别</span>
            </label>
            <label class="radio-option">
              <input type="radio" v-model="diffType" value="patch" />
              <span>Patch格式</span>
            </label>
          </div>
        </div>
        <div class="options-row">
          <div class="option-group">
            <label>
              <input type="checkbox" v-model="ignoreWhitespace" />
              忽略空白字符
            </label>
            <label>
              <input type="checkbox" v-model="ignoreCase" />
              忽略大小写
            </label>
            <label>
              <input type="checkbox" v-model="ignoreLineEndings" />
              忽略换行符
            </label>
          </div>
          <div class="action-buttons">
            <button @click="startCompare" class="compare-btn">开始比较</button>
            <button @click="clearAll" class="clear-all-btn">清除所有内容</button>
          </div>
        </div>
      </div>

      <div class="diff-results" v-if="diffResult.length > 0">
        <h3>对比结果:</h3>
        <div class="diff-stats">
          <span class="stat-item">
            <span class="stat-label">新增:</span>
            <span class="stat-value added">{{ stats.added }}</span>
          </span>
          <span class="stat-item">
            <span class="stat-label">删除:</span>
            <span class="stat-value removed">{{ stats.removed }}</span>
          </span>
          <span class="stat-item">
            <span class="stat-label">相同:</span>
            <span class="stat-value unchanged">{{ stats.unchanged }}</span>
          </span>
        </div>

        <!-- 双栏对比展示 -->
        <div
          class="diff-side-by-side"
          v-if="
            diffType === 'lines' ||
            diffType === 'chars' ||
            diffType === 'words' ||
            diffType === 'patch'
          "
        >
          <div class="diff-column">
            <div class="column-header">🍊 文本1</div>
            <div class="column-content">
              <div
                v-for="(part, index) in leftColumn"
                :key="`left-${index}`"
                :class="['diff-line', getDiffClass(part)]"
              >
                <span
                  class="line-number"
                  v-if="diffType === 'lines' || diffType === 'words' || diffType === 'patch'"
                  >{{ part.lineNumber || '' }}</span
                >
                <span class="line-content" v-html="formatDiffContent(part)"></span>
              </div>
            </div>
          </div>
          <div class="diff-column">
            <div class="column-header">🍒 文本2</div>
            <div class="column-content">
              <div
                v-for="(part, index) in rightColumn"
                :key="`right-${index}`"
                :class="['diff-line', getDiffClass(part)]"
              >
                <span
                  class="line-number"
                  v-if="diffType === 'lines' || diffType === 'words' || diffType === 'patch'"
                  >{{ part.lineNumber || '' }}</span
                >
                <span class="line-content" v-html="formatDiffContent(part)"></span>
              </div>
            </div>
          </div>
        </div>

        <!-- 单栏展示（备用，目前所有格式都使用双栏） -->
        <div class="diff-output" v-else>
          <div
            v-for="(part, index) in diffResult"
            :key="index"
            :class="['diff-line', getDiffClass(part)]"
          >
            <span
              class="line-number"
              v-if="diffType === 'lines' || diffType === 'words' || diffType === 'patch'"
              >{{ part.lineNumber || '' }}</span
            >
            <span class="line-content" v-html="formatDiffContent(part)"></span>
          </div>
        </div>
      </div>

      <div class="diff-results" v-else-if="text1 || text2">
        <h3>对比结果:</h3>
        <div class="no-differences">
          <p>✅ 两段文本完全相同</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import * as Diff from 'diff'

interface DiffPart {
  added?: boolean
  removed?: boolean
  value: string
  lineNumber?: number
}

const text1 = ref('')
const text2 = ref('')
const diffType = ref('lines') // 默认使用行级别对比
const ignoreWhitespace = ref(false)
const ignoreCase = ref(false)
const ignoreLineEndings = ref(false)

const diffResult = ref<DiffPart[]>([])
const stats = ref({
  added: 0,
  removed: 0,
  unchanged: 0,
})

// 计算属性：生成左右两栏的数据
const leftColumn = computed(() => {
  if (
    diffType.value !== 'lines' &&
    diffType.value !== 'chars' &&
    diffType.value !== 'words' &&
    diffType.value !== 'patch'
  )
    return []

  const left: DiffPart[] = []
  let lineNumber = 1

  if (diffType.value === 'chars' || diffType.value === 'words') {
    // 字符级别和单词级别的处理
    diffResult.value.forEach((part) => {
      if (part.removed) {
        // 删除的内容显示在左栏
        left.push({
          ...part,
          lineNumber: diffType.value === 'words' ? lineNumber++ : undefined,
        })
      } else if (part.added) {
        // 新增的内容在左栏显示空
        left.push({
          value: '',
          lineNumber: diffType.value === 'words' ? lineNumber++ : undefined,
          added: false,
          removed: false,
        })
      } else {
        // 相同的内容显示在左栏
        left.push({
          ...part,
          lineNumber: diffType.value === 'words' ? lineNumber++ : undefined,
        })
      }
    })
  } else if (diffType.value === 'patch') {
    // Patch格式的处理
    diffResult.value.forEach((part, index) => {
      left.push({
        ...part,
        lineNumber: index + 1,
      })
    })
  } else {
    // 行级别的处理
    diffResult.value.forEach((part) => {
      if (part.removed) {
        // 删除的行显示在左栏
        left.push({
          ...part,
          lineNumber: lineNumber++,
        })
      } else if (part.added) {
        // 新增的行在左栏显示空行
        left.push({
          value: '',
          lineNumber: lineNumber++,
          added: false,
          removed: false,
        })
      } else {
        // 相同的行显示在左栏
        left.push({
          ...part,
          lineNumber: lineNumber++,
        })
      }
    })
  }

  return left
})

const rightColumn = computed(() => {
  if (
    diffType.value !== 'lines' &&
    diffType.value !== 'chars' &&
    diffType.value !== 'words' &&
    diffType.value !== 'patch'
  )
    return []

  const right: DiffPart[] = []
  let lineNumber = 1

  if (diffType.value === 'chars' || diffType.value === 'words') {
    // 字符级别和单词级别的处理
    diffResult.value.forEach((part) => {
      if (part.added) {
        // 新增的内容显示在右栏
        right.push({
          ...part,
          lineNumber: diffType.value === 'words' ? lineNumber++ : undefined,
        })
      } else if (part.removed) {
        // 删除的内容在右栏显示空
        right.push({
          value: '',
          lineNumber: diffType.value === 'words' ? lineNumber++ : undefined,
          added: false,
          removed: false,
        })
      } else {
        // 相同的内容显示在右栏
        right.push({
          ...part,
          lineNumber: diffType.value === 'words' ? lineNumber++ : undefined,
        })
      }
    })
  } else if (diffType.value === 'patch') {
    // Patch格式的处理
    diffResult.value.forEach((part, index) => {
      right.push({
        ...part,
        lineNumber: index + 1,
      })
    })
  } else {
    // 行级别的处理
    diffResult.value.forEach((part) => {
      if (part.added) {
        // 新增的行显示在右栏
        right.push({
          ...part,
          lineNumber: lineNumber++,
        })
      } else if (part.removed) {
        // 删除的行在右栏显示空行
        right.push({
          value: '',
          lineNumber: lineNumber++,
          added: false,
          removed: false,
        })
      } else {
        // 相同的行显示在右栏
        right.push({
          ...part,
          lineNumber: lineNumber++,
        })
      }
    })
  }

  return right
})

const compareTexts = () => {
  console.log('开始比较文本')
  if (!text1.value && !text2.value) {
    diffResult.value = []
    return
  }

  // 保存到localStorage
  localStorage.setItem('diff-text1', text1.value)
  localStorage.setItem('diff-text2', text2.value)

  let str1 = text1.value
  let str2 = text2.value

  // 应用选项
  if (ignoreWhitespace.value) {
    str1 = str1.replace(/\s+/g, ' ')
    str2 = str2.replace(/\s+/g, ' ')
  }

  if (ignoreCase.value) {
    str1 = str1.toLowerCase()
    str2 = str2.toLowerCase()
  }

  if (ignoreLineEndings.value) {
    str1 = str1.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
    str2 = str2.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
  }

  // 根据选择的对比级别进行差异比较
  let diff: any[] = []

  switch (diffType.value) {
    case 'chars':
      diff = Diff.diffChars(str1, str2)
      break
    case 'words':
      diff = Diff.diffWords(str1, str2, {
        ignoreWhitespace: ignoreWhitespace.value,
        ignoreCase: ignoreCase.value,
      })
      break
    case 'lines':
      diff = Diff.diffLines(str1, str2, {
        ignoreWhitespace: ignoreWhitespace.value,
        ignoreCase: ignoreCase.value,
      })
      break
    case 'patch':
      diff = Diff.createPatch('diff', str1, str2, 'original', 'modified', {
        ignoreWhitespace: ignoreWhitespace.value,
        ignoreCase: ignoreCase.value,
      })
        .split('\n')
        .map((line) => ({
          value: line,
          added: line.startsWith('+'),
          removed: line.startsWith('-'),
          unchanged: !line.startsWith('+') && !line.startsWith('-'),
        }))
      break
    default:
      diff = Diff.diffLines(str1, str2, {
        ignoreWhitespace: ignoreWhitespace.value,
        ignoreCase: ignoreCase.value,
      })
  }

  // 处理差异结果
  const processedDiff: DiffPart[] = []
  let lineNumber = 1

  if (diffType.value === 'patch') {
    // Patch格式特殊处理
    diff.forEach((part, index) => {
      processedDiff.push({
        ...part,
        value: part.value,
        lineNumber: index + 1,
      })
    })
  } else {
    // 其他格式的处理
    diff.forEach((part) => {
      if (diffType.value === 'chars' || diffType.value === 'words') {
        // 字符级别和单词级别直接使用
        processedDiff.push({
          ...part,
          value: part.value,
          lineNumber: undefined,
        })
      } else {
        // 行级别处理
        const lines = part.value.split('\n')
        lines.forEach((line: string, index: number) => {
          if (index > 0) lineNumber++
          processedDiff.push({
            ...part,
            value: line,
            lineNumber: part.added || part.removed ? lineNumber : undefined,
          })
        })
      }
    })
  }

  diffResult.value = processedDiff

  // 添加调试信息
  console.log('对比结果:', processedDiff)
  console.log('结果长度:', processedDiff.length)
  console.log('统计信息:', stats.value)

  // 计算统计信息
  calculateStats(processedDiff)
}

const calculateStats = (diff: DiffPart[]) => {
  let added = 0
  let removed = 0
  let unchanged = 0

  diff.forEach((part) => {
    if (part.added) {
      added += part.value.length
    } else if (part.removed) {
      removed += part.value.length
    } else {
      unchanged += part.value.length
    }
  })

  stats.value = { added, removed, unchanged }
}

const getDiffClass = (part: DiffPart) => {
  if (part.added) return 'diff-added'
  if (part.removed) return 'diff-removed'
  return 'diff-unchanged'
}

const formatDiffContent = (part: DiffPart) => {
  if (diffType.value === 'patch') {
    // Patch格式特殊处理
    if (part.added) {
      return `<span class="added-content">${escapeHtml(part.value)}</span>`
    } else if (part.removed) {
      return `<span class="removed-content">${escapeHtml(part.value)}</span>`
    } else {
      return `<span class="unchanged-content">${escapeHtml(part.value)}</span>`
    }
  } else if (diffType.value === 'chars' || diffType.value === 'words') {
    // 字符级别和单词级别
    if (part.added) {
      return `<span class="added-content">${escapeHtml(part.value)}</span>`
    } else if (part.removed) {
      return `<span class="removed-content">${escapeHtml(part.value)}</span>`
    } else {
      return `<span class="unchanged-content">${escapeHtml(part.value)}</span>`
    }
  } else {
    // 行级别
    if (part.added) {
      return `<span class="added-content">+ ${escapeHtml(part.value)}</span>`
    } else if (part.removed) {
      return `<span class="removed-content">- ${escapeHtml(part.value)}</span>`
    } else {
      return `<span class="unchanged-content">  ${escapeHtml(part.value)}</span>`
    }
  }
}

const escapeHtml = (text: string) => {
  const div = document.createElement('div')
  div.textContent = text
  return div.innerHTML
}

const clearText1 = () => {
  text1.value = ''
  compareTexts()
}

const clearText2 = () => {
  text2.value = ''
  compareTexts()
}

const startCompare = () => {
  if (!text1.value && !text2.value) {
    alert('请至少输入一段文本进行比较')
    return
  }

  // 添加按钮点击反馈
  const compareBtn = document.querySelector('.compare-btn') as HTMLButtonElement
  if (compareBtn) {
    compareBtn.textContent = '比较中...'
    compareBtn.disabled = true

    // 模拟处理时间，提供更好的用户体验
    setTimeout(() => {
      compareTexts()
      compareBtn.textContent = '开始比较'
      compareBtn.disabled = false
    }, 300)
  } else {
    compareTexts()
  }
}

const clearAll = () => {
  text1.value = ''
  text2.value = ''
  diffResult.value = []
  stats.value = { added: 0, removed: 0, unchanged: 0 }

  // 清除localStorage中的保存数据
  localStorage.removeItem('diff-text1')
  localStorage.removeItem('diff-text2')
}

const loadSample1 = () => {
  text1.value = `你好, 你好, 你好`
}

const loadSample2 = () => {
  text2.value = `你好, 你好1, 你好
你好`
}

onMounted(() => {
  // 页面加载完成后的初始化
  console.log('文件对比工具已加载')

  // 可以在这里添加一些初始化逻辑
  // 比如从localStorage恢复上次的文本内容
  const savedText1 = localStorage.getItem('diff-text1')
  const savedText2 = localStorage.getItem('diff-text2')

  if (savedText1) {
    text1.value = savedText1
  }
  if (savedText2) {
    text2.value = savedText2
  }
})
</script>

<style scoped lang="scss">
.file-diff-container {
  width: 80%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #fff;
}

.diff-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  h1 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 600;
  }

  .supported-formats {
    margin: 5px 0;
    font-size: 14px;
    opacity: 0.9;
  }

  .instructions {
    margin: 5px 0;
    font-size: 16px;
    font-weight: 500;
  }

  .privacy-notice {
    margin: 10px 0 0 0;
    font-size: 14px;
    opacity: 0.8;
    font-style: italic;
  }
}

.diff-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.text-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.text-area-container {
  display: flex;
  flex-direction: column;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease;

  &:focus-within {
    border-color: #667eea;
  }
}

.text-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e5e9;

  .text-label {
    font-weight: 600;
    font-size: 16px;
    color: #333;
  }

  .text-actions {
    display: flex;
    gap: 8px;

    button {
      padding: 4px 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: white;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s ease;

      &:hover {
        background: #f0f0f0;
        border-color: #ccc;
      }

      &.clear-btn {
        color: #dc3545;
      }

      &.sample-btn {
        color: #28a745;
      }
    }
  }
}

.text-area {
  min-height: 300px;
  padding: 16px;
  border: none;
  resize: vertical;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  background: #fafbfc;

  &::placeholder {
    color: #999;
  }
}

.diff-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e1e5e9;

  .diff-type-selector {
    display: flex;
    align-items: center;
    gap: 12px;

    .diff-type-label {
      font-weight: 600;
      font-size: 14px;
      color: #333;
      white-space: nowrap;
    }

    .diff-type-options {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;

      .radio-option {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        font-size: 14px;
        color: #555;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(102, 126, 234, 0.1);
        }

        input[type='radio'] {
          width: 16px;
          height: 16px;
          cursor: pointer;
          accent-color: #667eea;
        }

        span {
          font-weight: 500;
        }
      }
    }
  }

  .options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .option-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

    label {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 14px;
      color: #555;

      input[type='checkbox'] {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 12px;
    align-items: center;

    .compare-btn {
      padding: 10px 20px;
      background: #28a745;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s ease;

      &:hover:not(:disabled) {
        background: #218838;
        transform: translateY(-1px);
      }

      &:active:not(:disabled) {
        transform: translateY(0);
      }

      &:disabled {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
      }
    }

    .clear-all-btn {
      padding: 8px 16px;
      background: #dc3545;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.2s ease;

      &:hover {
        background: #c82333;
      }
    }
  }
}

.diff-results {
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  overflow: visible;

  h3 {
    margin: 0;
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e5e9;
    font-size: 18px;
    color: #333;
  }
}

.diff-stats {
  display: flex;
  gap: 20px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e5e9;

  .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;

    .stat-label {
      font-size: 14px;
      color: #666;
    }

    .stat-value {
      font-weight: 600;
      font-size: 16px;

      &.added {
        color: #28a745;
      }

      &.removed {
        color: #dc3545;
      }

      &.unchanged {
        color: #6c757d;
      }
    }
  }
}

.diff-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 100px;
  max-height: none;
  background: #fafbfc;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid #e1e5e9;
  border-radius: 0 0 8px 8px;
  overflow: visible;

  .diff-column {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e1e5e9;

    &:last-child {
      border-right: none;
    }

    .column-header {
      padding: 12px 16px;
      background: #f8f9fa;
      border-bottom: 1px solid #e1e5e9;
      font-weight: 600;
      font-size: 14px;
      color: #333;
      text-align: center;
    }

    .column-content {
      flex: 1;
      overflow-y: visible;
      max-height: none;

      .diff-line {
        display: flex;
        padding: 2px 16px;
        border-bottom: 1px solid #f0f0f0;
        min-height: 20px;
        align-items: center;
        flex-wrap: wrap;

        &:hover {
          background: #f0f0f0;
        }

        &:last-child {
          border-bottom: none;
        }

        .line-number {
          min-width: 50px;
          color: #999;
          font-size: 12px;
          padding-right: 12px;
          border-right: 1px solid #e0e0e0;
          margin-right: 12px;
          text-align: right;
        }

        .line-content {
          flex: 1;
          white-space: pre-wrap;
          word-break: break-all;
        }

        &.diff-added {
          background: #f8fff8;
          border-left: 4px solid #28a745;

          .line-content {
            color: #155724;
          }
        }

        &.diff-removed {
          background: #fff8f8;
          border-left: 4px solid #dc3545;

          .line-content {
            color: #721c24;
          }
        }

        &.diff-unchanged {
          background: #fafbfc;

          .line-content {
            color: #333;
          }
        }
      }
    }
  }
}

.diff-output {
  min-height: 100px;
  max-height: 500px;
  overflow-y: auto;
  background: #fafbfc;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;

  .diff-line {
    display: flex;
    padding: 2px 16px;
    border-bottom: 1px solid #f0f0f0;

    &:hover {
      background: #f0f0f0;
    }

    .line-number {
      min-width: 60px;
      color: #999;
      font-size: 12px;
      padding-right: 12px;
      border-right: 1px solid #e0e0e0;
      margin-right: 12px;
    }

    .line-content {
      flex: 1;
      white-space: pre-wrap;
      word-break: break-all;
    }

    &.diff-added {
      background: #f8fff8;
      border-left: 4px solid #28a745;

      .line-content {
        color: #155724;
      }
    }

    &.diff-removed {
      background: #fff8f8;
      border-left: 4px solid #dc3545;

      .line-content {
        color: #721c24;
      }
    }

    &.diff-unchanged {
      background: #fafbfc;

      .line-content {
        color: #333;
      }
    }
  }
}

.no-differences {
  padding: 40px;
  text-align: center;
  color: #28a745;
  font-size: 18px;
  font-weight: 500;
}

// 添加和删除内容的样式
:deep(.added-content) {
  background: #d4edda;
  color: #155724;
  padding: 1px 2px;
  border-radius: 2px;
}

:deep(.removed-content) {
  background: #f8d7da;
  color: #721c24;
  padding: 1px 2px;
  border-radius: 2px;
  text-decoration: line-through;
}

:deep(.unchanged-content) {
  color: #333;
}

@media (max-width: 768px) {
  .file-diff-container {
    width: 95%;
    padding: 10px;
  }

  .diff-header {
    padding: 15px;

    h1 {
      font-size: 22px;
    }

    .supported-formats {
      font-size: 12px;
    }

    .instructions {
      font-size: 14px;
    }

    .privacy-notice {
      font-size: 12px;
    }
  }

  .text-inputs {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .text-area {
    min-height: 200px;
    font-size: 13px;
  }

  .diff-options {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    padding: 12px;

    .diff-type-selector {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;

      .diff-type-label {
        text-align: center;
      }

      .diff-type-options {
        justify-content: center;
        gap: 12px;

        .radio-option {
          font-size: 13px;
        }
      }
    }

    .options-row {
      flex-direction: column;
      gap: 12px;
    }

    .option-group {
      justify-content: center;
      gap: 15px;

      label {
        font-size: 13px;
      }
    }

    .action-buttons {
      flex-direction: column;
      gap: 8px;

      .compare-btn,
      .clear-all-btn {
        width: 100%;
        padding: 12px;
        font-size: 16px;
      }
    }
  }

  .diff-stats {
    flex-direction: column;
    gap: 8px;
    padding: 10px;

    .stat-item {
      justify-content: space-between;
    }
  }

  .diff-side-by-side {
    grid-template-columns: 1fr;
    gap: 20px;

    .diff-column {
      border-right: none;
      border-bottom: 1px solid #e1e5e9;

      &:last-child {
        border-bottom: none;
      }

      .column-content {
        max-height: none;

        .diff-line {
          padding: 4px 12px;

          .line-number {
            min-width: 40px;
            font-size: 11px;
          }
        }
      }
    }
  }

  .diff-output {
    max-height: none;
    font-size: 12px;

    .diff-line {
      padding: 4px 12px;

      .line-number {
        min-width: 40px;
        font-size: 11px;
      }
    }
  }
}

@media (max-width: 480px) {
  .file-diff-container {
    width: 100%;
    padding: 8px;
  }

  .diff-header {
    padding: 12px;

    h1 {
      font-size: 20px;
    }
  }

  .text-area {
    min-height: 150px;
    padding: 12px;
  }

  .diff-options {
    padding: 10px;

    .option-group {
      gap: 10px;

      label {
        font-size: 12px;
      }
    }
  }
}
</style>
